<template>
  <BoTable
    :columns="_columns"
    :request="_request"
    :row-selection="rowSelection"
    row-key="id"
    ref="tableRef"
  >
    <template #toolbars>
      <Space :size="8">
        <Button type="primary" @click="onAdd"> 新增 </Button>
        <Button :disabled="!selectKeys.length" @click="onDelete"> 删除 </Button>
      </Space>
    </template>
  </BoTable>

  <FormModal :tabs="_item" :model="formState">
    <template #infoBtn>
      <div class="custom_btn">
        <Button type="primary" @click="onSubmit('info')"> 保存 </Button>
      </div>
    </template>
    <template #loginBtn>
      <div class="custom_btn">
        <Button type="primary" @click="onSubmit('login')"> 保存 </Button>
      </div>
    </template>
    <template #details>
      <FormItemRest>
        <customFrom
          v-model:info="formState._formState"
          :formState="formState"
          :formRef="formRef"
        />
      </FormItemRest>
    </template>
  </FormModal>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { useFormModal } from '@boeyo/hooks';
import { BoFormProps, BoTable, BoTableProps } from '@boeyo/ui';
import { Button, FormItemRest, Modal, Space, message } from 'ant-design-vue';
import customFrom from '@/components/customFrom/index.vue';

const { FormModal, open, formRef } = useFormModal({
  size: 'small',
  // column: 1,
});
const formState = ref({
  _formState: [],
});
const onAdd = () => {
  open({
    title: '新增',
    hideFooter: true,
    request: async (params: any) => {},
    defaultValue: {
      status: '1',
    },
  });
};

const onSubmit = async (type) => {
  const query = {
    info: {
      params: ['name', 'manufacturer', 'type', 'ip'],
      api: () => {},
    },
    login: {
      params: ['address', 'username', 'password'],
      api: () => {},
    },
  };
  const queryParams = await formRef.value.validateFields(query[type].params);
  const result = await query[type].api(queryParams);
  console.log(result, 'type');
};
const selectKeys = ref<number[]>([]);
const rowSelection = computed<BoTableProps['rowSelection']>(() => {
  return {
    onChange(values) {
      selectKeys.value = values as number[];
    },
  };
});

const _columns = computed<BoTableProps['columns']>(() => [
  {
    title: '序号',
    dataIndex: 'index',
    customRender({ renderIndex, index }) {
      return renderIndex + 1;
    },
    hideInSearch: true,
  },
  {
    title: '设备名称',
    dataIndex: 'name',
  },
  {
    title: '设备IP',
    dataIndex: 'ip',
  },
  {
    title: '带外地址',
    dataIndex: 'address',
    hideInSearch: true,
  },
  {
    title: '设备厂商',
    dataIndex: 'shang',
    hideInSearch: true,
  },
  {
    title: '设备型号',
    dataIndex: 'type',
    hideInSearch: true,
  },
  {
    title: '操作',
    dataIndex: 'operation',
    hideInSearch: true,
    fixed: 'right',
    actions: [
      {
        text: '修改',
        onClick(record) {
          console.log(record);

          open({
            title: '修改',
            modalType: 'edit',
            hideFooter: true,
            request: async (params: any) => {},
            defaultValue: record,
          });
        },
      },
    ],
  },
]);
const _item = computed<BoFormProps['columns']>(() => {
  return [
    {
      tab: '物理机信息',
      key: 1,
      columns: [
        {
          title: '设备名称',
          valueType: 'input',
          dataIndex: 'name',
          fieldProps: {
            placeholder: '请输入设备名称',
          },
          formItemProps: {
            rules: [
              {
                required: true,
                message: '请输入设备名称',
                trigger: 'blur',
              },
            ],
          },
        },
        {
          title: '设备厂商',
          valueType: 'input',
          dataIndex: 'manufacturer',
          fieldProps: {
            placeholder: '请输入设备厂商',
          },
          formItemProps: {
            rules: [
              {
                required: true,
                message: '请输入设备厂商',
                trigger: 'blur',
              },
            ],
          },
        },
        {
          title: '设备型号',
          valueType: 'input',
          dataIndex: 'type',
          fieldProps: {
            placeholder: '请输入设备型号',
          },
          formItemProps: {
            rules: [
              {
                required: true,
                message: '请输入设备型号',
                trigger: 'blur',
              },
            ],
          },
        },
        {
          title: '设备IP',
          valueType: 'input',
          dataIndex: 'ip',
          fieldProps: {
            placeholder: '请输入设备IP',
          },
          formItemProps: {
            rules: [
              {
                required: true,
                message: '请输入设备IP',
                trigger: 'blur',
              },
            ],
          },
        },
        {
          title: '',
          valueType: 'infoBtn',
          dataIndex: 'infoBtn',
          formItemProps: {
            wrapperCol: { span: 24 },
          },
        },
      ],
    },
    {
      tab: '规格配置',
      key: 2,
      columns: [
        {
          title: '',
          valueType: 'input',
          dataIndex: 'details',
          formItemProps: {
            wrapperCol: { span: 24 },
          },
        },
      ],
    },
    {
      tab: '登录信息',
      key: 3,
      columns: [
        {
          title: '带外地址',
          valueType: 'input',
          dataIndex: 'address',
          fieldProps: {
            placeholder: '请输入带外地址',
          },
          formItemProps: {
            rules: [
              {
                required: true,
                message: '请输入带外地址',
                trigger: 'blur',
              },
            ],
          },
        },
        {
          title: '用户名称',
          valueType: 'input',
          dataIndex: 'username',
          fieldProps: {
            placeholder: '请输入用户名称',
          },
          formItemProps: {
            rules: [
              {
                required: true,
                message: '请输入用户名称',
                trigger: 'blur',
              },
            ],
          },
        },
        {
          title: '密码',
          valueType: 'input',
          dataIndex: 'password',
          fieldProps: {
            placeholder: '请输入密码',
          },
          formItemProps: {
            rules: [
              {
                required: true,
                message: '请输入密码',
                trigger: 'blur',
              },
            ],
          },
        },
        {
          title: '',
          valueType: 'loginBtn',
          dataIndex: 'loginBtn',
          formItemProps: {
            wrapperCol: { span: 24 },
          },
        },
      ],
    },
  ];
});
const _request = () => {
  return {
    total: 1,
    rows: [
      {
        name: 'HDM21XXXX',
        ip: '21.128.126.67',
        address: '21.128.126.67',
        shang: 'H3C',
        type: 'UnlServer R4300 G3',
      },
    ],
  };
};

const onDelete = () => {
  Modal.confirm({
    title: '系统提示',
    content: `确认要删除当前选中项数据吗？`,
    onOk: async () => {
      // selectKeys.value.join()
      // tableRef.value.refresh();
      message.success('操作成功');
    },
  });
};
</script>

<style scoped lang="scss">
.custom_btn {
  display: flex;
  justify-content: flex-end;
  :deep(.ant-btn) {
    width: 561px;
  }
}
</style>

<route lang="json">
{
  "meta": {
    "title": "物理机"
  }
}
</route>
